<template>
  <section class="sp-section sp-form">
    <section class="sp-form__header">
      <el-tabs v-model="classifyIndex" type="card" @tab-click="getClassifyIndex">
        <el-tab-pane v-for="(item, $index) in classify" :key="$index" :label="item.label" :name="item.value"></el-tab-pane>
      </el-tabs>
    </section>
    <section class="sp-form__filter" v-if="classifyIndex == '0'">
      <el-form :model="queryParams" :inline="true">
        <el-form-item label="车站">
           <el-select
    v-model="queryParams.stop_name"
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
          <!-- <el-input v-model="queryParams.stop_name" placeholder="请输入车站"></el-input> -->
        </el-form-item>
        <el-form-item label="路线">
          <el-select v-model="queryParams.route_id"  filterable placeholder="请选择路线">
            <el-option v-for="(item, $index) in RouteType" :key="$index" :label="item.route_name" :value="item.id"></el-option>
          </el-select>
          <!-- <el-input v-model="queryParams.code" placeholder="请输入路段"></el-input> -->
        </el-form-item>
        <el-form-item label="客户">
          <el-select v-model="queryParams.customer" filterable placeholder="请选择客户">
            <el-option v-for="(item, $index) in Customer" :key="$index" :label="item.name" :value="item.name"></el-option>
          </el-select>
          <!-- <el-input v-model="queryParams.customer_name" placeholder="请输入客户名称"></el-input> -->
        </el-form-item>
        <el-form-item label="级别">
          <el-select v-model="queryParams.rank" placeholder="请选择级别">
            <el-option label="普通" value="普通"></el-option>
            <el-option label="精品" value="精品"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车型">
          <el-select v-model="queryParams.car_type_id" placeholder="请选择车型">
            <el-option v-for="(item, $index) in type" :key="$index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择车辆状态" >
            <el-option label="可用" value="1"></el-option>
            <el-option label="已出租" value="2" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" v-model="queryParams.end_date">
          <el-date-picker placeholder="请选择日期" type="date"  v-model="queryParams.end_date" value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getInitData">查询</el-button>
          <el-button type="warning" @click="() => { queryParams = { page: 1, num: 10 }; getInitData() }">重置</el-button>
        </el-form-item>
      </el-form>
    </section>
    <el-table :data="dataSource" @selection-change="getTableSelect" v-if="classifyIndex == '0'" >
      <!--
      columns2: [
        { title: '缩略图', dataIndex: 'thumb', scopedSlots: { customRender: 'thumb' } },
        { title: '路段', dataIndex: 'luduan', scopedSlots: { filterDropdown: 'filterDropdown', customRender: 'customRender' } },
        { title: '位置', dataIndex: 'title' },
        { title: '编号', dataIndex: 'code' },
        { title: '客户名称', dataIndex: 'customer_name', scopedSlots: { filterDropdown: 'customer', customRender: 'customerRender' } },
        { title: '预定点客户', dataIndex: 'pre_customer' },
        { title: '上板时间', dataIndex: 'begin_at' },
        { title: '到期时间', dataIndex: 'end_at', sorter: true },
        { title: '状态', dataIndex: 'status', scopedSlots: { customRender: 'status' }, filters: [{ text: '空点', value: '1' }, { text: '定点', value: '2' }, { text: '不定点', value: '3' }] }
      ], -->
      <el-table-column type="selection" width="35" v-if="classifyIndex == '0'" />
      <el-table-column label="缩略图" prop="thumb" width="120" v-if="classifyIndex == '0'">
        <template slot-scope="scope" v-if="classifyIndex == '0'">
          <img :src="`http://oa.xngjgg.cn/${scope.row.thumb}`" @click="getPics(`http://oa.xngjgg.cn/${scope.row.thumb}`)" style="width: 80px; height: 55px;" alt="">
        </template>
      </el-table-column>
      <el-table-column label="路线" prop="route_name"  />
      <el-table-column label="车号" prop="code"  />
      <el-table-column label="等级" prop="rank"  />
      <el-table-column label="车型" prop="type_name"  />
      <el-table-column label="画面内容" prop="customer"  />
      <el-table-column label="发布日期" prop="publish_date"  />
      <el-table-column label="到期时间" prop="end_date"  />
      <el-table-column label="状态" prop="status" >
        <template slot-scope="{ row }"  v-if="classifyIndex == '0'">
          <el-tag :type="row.status === 1 ? '' : 'danger'">{{ row.status === 1 ? '可用' : '已出租' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="setCheckSingle(scope.row.id)" type="primary" size="mini">
            选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <section class="sp-form__footer" v-if="classifyIndex == '0'">
      <div class="sp-form__footer-control">
        <el-button type="primary" size="small" :disabled="!dataSelect.length" @click="setCheckGroup">加入已选点车辆</el-button>
      </div>
      <div class="sp-form__footer-page">
        <el-pagination background layout="total, jumper, prev, pager, next" :total="total" @current-change="setPage" />
      </div>
    </section>
    <sp-dialog :visible="picStatus" @submit="() => { picStatus = false; picSrc = ''; }" @cancel="() => { picStatus = false; picSrc = ''; }">
      <img :src="picUrl" alt="" style="display: block; width: 100%; height: auto;">
    </sp-dialog>
     <el-table
      :data="RouteType"
      style="width: 100%"
     v-if="classifyIndex == '1'">
      <el-table-column type="selection" width="35"   v-if="classifyIndex == '0'"/>
      <el-table-column
        prop="route_name"
        label="路线名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="car_num"
        label="车辆总数"
        width="180">
      </el-table-column>
      <!-- <el-table-column
        prop="car_num"
        label="车辆总数"
        width="180">
      </el-table-column> -->
      <el-table-column
        prop="blank_num"
        label="空置车辆"
        width="180">
      </el-table-column>
      <el-table-column
        prop="saled_num"
        label="已上刊"
        width="180">
      </el-table-column>
      <el-table-column
        prop="booked_num"
        label="已预约"
        width="180">
      </el-table-column>
      <el-table-column
        prop="pernum"
        label="空置率"
        width="180"
        v-if="classifyIndex == '1'">
      </el-table-column>
      <!-- <el-table-column
        prop="blank_num"
        label="空置率%">
      <template slot-scope="scope">
         <div style=" text-align: center;">{{ scope.row.pernum }}%</div>
           <el-slider v-model="scope.row.pernum" ref="slider" :show-tooltip="true" :format-tooltip="formatTooltip" ></el-slider>
        </template>
      </el-table-column> -->
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="reserve(scope.row.id,scope.row.route_name)">预定</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 预定弹框按钮 -->
    <el-dialog :title="route_name" :visible.sync="reserveDialogTableVisible" width="30%">
  <el-table :data="gridData">
    <el-table-column label="路线名" width="150">{{route_name}}</el-table-column>
    <el-table-column property="code" label="车牌号" width="200"></el-table-column>
    <el-table-column  label="操作">
      <template slot-scope="scope">
        <el-button type="primary" size="small" @click="addcar(scope.row.id)">添加</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-dialog>
  </section>
</template>

<script>
import { getBusCar, getBusType, getBusLevel, setMulFavorite, setFavorite, getRouteType, getCustomer, getRouteStop, getRouteInfo } from '@/api/bus'
export default {
  name: 'TeadMapForm',
  data () {
    return {
      options: [],
      loading: false,
      classify: [],
      classifyIndex: '0',
      dataSource: [],
      dataSelect: [],
      type: [],
      RouteType: [],
      Customer: [],
      rank: [],
      gridData: [],
      queryParams: {
        page: 1,
        num: 10
      },
      picStatus: false,
      picUrl: '',
      total: 0,
      route_name: null,
      reserveDialogTableVisible: false,
      userInfo: {}
    }
  },
  created () {
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo')) || { role_id: 0 }
  },
  mounted () {
    this.getCategory()
    this.getBusType()
    this.getRouteType()
    this.getCustomer()
    this.getBusRank()
  },
  methods: {
    // 躺框添加按钮
    addcar (id) {
      this.setCheckSingle(id)
    },
    reserve (id, name) {
      this.route_name = name
      this.getRouteInfo(id)
      this.reserveDialogTableVisible = true
    },
    async getRouteInfo (id) {
      const params = {
        route_id: id
      }
      const { data } = await getRouteInfo(params)
      this.gridData = data.cars
      console.log(data)
    },
    // 模糊搜索
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.getRouteStop(query)
        }, 200)
      } else {
        this.options = []
      }
    },
    // 站点名字搜索
    async getRouteStop (query) {
      const params = {
        stop_name: query
      }
      const { data: { data } } = await getRouteStop(params)
      this.options = data
    },
    // 获取分类
    getCategory () {
      this.classify.unshift({ value: '0', label: '西宁公交' }, { value: '1', label: '公交线路' })
      this.getInitData()
    },
    // 获取车型分类
    async getBusType () {
      const { data } = await getBusType()
      this.type = data
      console.log(this.type)
    },
    // 获取公交路线
    async getRouteType () {
      const { data } = await getRouteType()
      this.RouteType = data
      this.RouteType.forEach(item => {
        item.pernum = parseInt(item.blank_num / item.car_num * 100) + '%'
      })
      // this.$nextTick(() => {
      //   console.log(this.$refs.slider1)
      //   this.$refs.slider1.setPosition(70)
      // })
      // console.log(this.RouteType)
    },
    formatTooltip (value) {
      this.$nextTick(() => {
        this.$refs.slider.setPosition(100)
      })
      return `${value}%`
    },
    // 获取客户信息
    async getCustomer () {
      const { data } = await getCustomer()
      this.Customer = data
      console.log(this.Customer)
    },
    // 获取车型等级
    async getBusRank () {
      const { data } = await getBusLevel()
      this.rank = data
      console.log(this.rank)
    },
    // 设置当前tab 根据category_id(value)重新请求
    getClassifyIndex (tab, event) {
      // console.log(this.classifyIndex)
      console.log(tab, event)
      // this.getInitData()
      this.getRouteType()
    },
    // 获取表格数据
    async getInitData () {
      const params = {
        ...this.queryParams
      }
      const { data: { data, total } } = await getBusCar(params)
      this.dataSource = data
      this.total = total
    },
    // 单选点位添加
    async setCheckSingle (id) {
      const { status } = await setFavorite({ bus_car_id: id })
      this.$notify[status ? 'success' : 'error']({
        title: status ? '成功' : '错误',
        message: status ? '添加车辆成功' : '添加车辆失败'
      })
      console.log('this.$parent.$parent', this.$parent.$parent.$parent.$parent.$children[1].$children[0].$children[0])

      this.$parent.$parent.$parent.$parent.$children[1].$children[0].$children[0].getCheckList()
    },
    // 多选点位添加
    async setCheckGroup () {
      const params = {
        bus_car_codes: this.dataSelect.map(item => item.code).join(',')
      }
      const { status } = await setMulFavorite(params)
      this.$notify[status ? 'success' : 'error']({
        title: status ? '成功' : '错误',
        message: status ? '添加车辆成功' : '添加车辆失败'
      })
      this.$parent.$parent.$parent.$parent.$children[1].$children[0].$children[0].getCheckList()
    },
    // 获取select的tr
    getTableSelect (val) {
      this.dataSelect = val
    },
    // 分页
    setPage (e) {
      this.queryParams.page = e
      this.getInitData()
    },
    getPics (url) {
      this.picStatus = true
      this.picUrl = url
    }
  }
}
</script>

<style lang="scss" scoped>
  .sp-form {
    height: 100%;
    padding: 0;

    &__ {

      &card {
        height: 100%;
      }

      &footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
      }
    }
  }
</style>
